import * as echarts from 'echarts'
import { throttle } from 'throttle-debounce'
import { addResizeListener, removeResizeListener } from '@/utils/resize-event'

export default {
  data() {
    return {
      chartObj: null
    }
  },
  computed: {},
  mounted() {
    let realResize = throttle(200, this.onResize)
    this.realResize = realResize
    let domTarget = document.querySelector('.app-content') || document.querySelector('#app') || document.body
    addResizeListener(domTarget, this.realResize)
    this.$app.$on('echart-resize', realResize)
  },
  beforeDestroyed() {
    this.chartObj && this.chartObj.resize && this.chartObj.dispose()
    let domTarget = document.querySelector('.app-content') || document.querySelector('#app') || document.body
    removeResizeListener(domTarget, this.realResize)
    this.$app.$off('echart-resize', this.realResize)
  },
  methods: {
    onResize() {
      if (this.chartObj && this.chartObj._dom) {
        let dom = this.chartObj._dom
        if (dom.offsetWidth === 0) {
          return
        }
      }
      this.chartObj && this.chartObj.resize && this.chartObj.resize()
    },
    initChart(theme) {
      let dom = this.$refs.chart
      this.chartObj = echarts.init(dom, theme)
      // if (this.handleDat)
      // this.setOption()
    }
  }
}
